<template>
  <div>
    <img :src="imgArr[index]" width="300px"> <br>
    <button type="button" @click="toLeft()">左</button>
    <button type="button" @click="toRight()">右</button>
  </div>
</template>

<script>
  export default {
    name: "ShowImg",
    data() {
      return {
        imgArr: ["../../static/img/1.jpeg", "../../static/img/2.jpeg", "../../static/img/3.jpeg", "../../static/img/4.jpeg"],
        index: 0
      }
    },
    methods: {
      toLeft: function () {
        this.index--;
        if (this.index < 0) {
          this.index = this.imgArr.length - 1;
        }
      },
      toRight: function () {
        this.index++;
        if (this.index > this.imgArr.length - 1) {
          this.index = 0;
        }
      }
    }
  }
</script>

<style scoped>

</style>
